import { View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { FC } from "react";
import { AtButton } from "taro-ui";
import styles from "./index.module.less";

interface Props {
  /**是否阅读协议 */
  isChecked: boolean;
  /**切换手机号登录 */
  onSwitchPhone: () => void;
}

const WechatLogin: FC<Props> = ({ isChecked, onSwitchPhone }) => {
  const onGetPhone = (e) => {
    if (!isChecked) {
      return Taro.showToast({ title: "请先阅读协议", icon: "none" });
    }
    Taro.showModal({
      content: "该小程序为个人开发者无法获取手机号",
      confirmColor: "#FD486E",
      success: (e) => {
        if (e.confirm) {
          Taro.navigateTo({
            url: "/package/member/perfect-userInfo/index",
          });
        }
      },
    });
    console.log(e);
  };

  return (
    <>
      <View className={styles["logo"]}>Logo</View>
      <AtButton
        className={styles["btn"]}
        openType="getPhoneNumber"
        onGetPhoneNumber={(e) => onGetPhone(e.detail)}
      >
        一键登陆
      </AtButton>
      <AtButton
        className={`${styles["btn"]} ${styles["btn2"]}`}
        openType="getPhoneNumber"
        onClick={() => onSwitchPhone()}
      >
        已有账号?
      </AtButton>
    </>
  );
};

export default WechatLogin;
